ASP.NEThtml5新机制：postMessage实现安全跨域通信（代码）
本篇文章给大家带来的内容是关于html5新机制：postMessage实现安全跨域通信（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。postmessage解析
HTML5提供了新型机制PostMessage实现安全的跨源通信. 语法
click mouseenter mouseleave 回调函数 useCaption
通过窗口的origin属性来指定哪些窗口能接收到消息事件, 其值可以是字符”*”(表示无限制)或者一个URL transfer:
window.open返回的窗口对象. message: 将要发送到其他窗口的数据. targetOrigin:
主界面 main.html
以上就是html5新机制：postMessage实现安全跨域通信（代码）的详细内容，更多请关注聚合云库其它相关文章！
element.addEventListener(event,fn,useCaption ); 三个参数 event 事件 比如
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>跨域数据访问</title>
<script type="text/javascript">
window.addEventListener('message',function(e){
console.log("e--->",e);
const data = e.data;
document.getElementById('main1').style.backgroundColor=e.data;
},false)
</script>
</head>
<body>
<p id="main1" style="width:200px;height:200px;margin:100px;border:solid 1px #000;">
我是主界面,等待接收iframe的传递
</p>
<p style="margin:100px;">
iframe
<iframe src=https://www.ym97.com/"http:/localhost:3000/iframe.html" width="800px" height="300px" ></iframe>
</p>
</body>
</html>iframe界面<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
html,body{
height:100%;
margin:0px;
}
</style>
</head>
<body style="height:100%;">
<p id="frame" style="height:200px; width:200px;background-color:rgb(204, 204, 0)" onclick="changeColor()">
点击改变颜色
</p>
<script type="text/javascript">
function changeColor(){
var frame = document.getElementById('frame');
var color=frame.style.backgroundColor;
if(color=='rgb(204, 102, 0)'){
color='rgb(204, 204, 0)';
}else{
color='rgb(204,102,0)';
}
console.log("frame===>",frame);
console.log("color",color);
frame.style.backgroundColor=color;
window.parent.postMessage(color,'*');
}
</script>
</body>
</html>
相关推荐：
是一串和message同时传递的Transferable对象. 这些对象的所有权将被转移给消息的接收方, 而发送一放将不再保有所有权.本站内容来源于网络，如有侵权请与我们联系，我们会及时删除，我们深感抱歉！
注：本站所有信息仅供用于网络技术学习参考,学习中请遵循相关法律法规！
本文地址: https://v30.fanwenzhu.com/jiaob/cssm/6787.shtml
相关文章
热门TAG
win10 ecshop 主机 阿里云 解决 配置 C# C++ 解析 SQL语句 命令 Go语言 方法 CSS3 HTML5 CSS win7 MSSQL 服务器配置 IIS7.5 IIS7 IIS6 IIS CentOS 7 Linux oracle数据库 oracle phpcms discuz discuz教程最新文章
-
其中border-left决定了底部直
时间：2021-01-23
-
当你自己回头来看你写的
时间：2021-01-23
-
④格式标签 粗体：b/b 斜
时间：2021-01-23
-
我们直接看代码： !DOCTY
时间：2021-01-23
-
这里就是吐槽的IE6！） 图
时间：2021-01-23
-
假设我们的HTML代码如下：
时间：2021-01-23
-
那么使用 CSS3 新增的选择
时间：2021-01-23
-
scaleGlassRectangle.y
时间：2021-01-23
热门文章
-
可以加我的HTML5前端交流群111645711 CSS源码
时间：2021-01-15
-
就可以对子元素进行 3D 变形操作了
时间：2021-01-12
-
用css让一个容器水平垂直
时间：2021-01-12
-
而没有设置高度
时间：2021-01-19
-
canvas与html5实现视频截图成果
时间：2021-01-19
-
所以通常不需要发送
时间：2021-01-19
-
我们尝试一下更新一下HTML结构
时间：2021-01-23
-
scaleGlassRectangle.y
时间：2021-01-23
-
HTML5生拖放实例分析
时间：2021-01-12
-
在全局:root{ }伪类中定义了一个 CSS 变量
时间：2021-01-21